import { useState, useRef, useEffect } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';
// import { useNavigate } from 'react-router-dom'
let Map=(props)=> {
  let map = null;
  // let navigate = useNavigate()
  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "bb3dec48082bcd0270c8f1c560bf88d9",
    };
    AMapLoader.load({
      key: "46211f3645acc6ea1b040766d215a346",
      version: "2.0",
      plugins: ["AMap.Scale", "AMap.AutoComplete", 'AMap.PlaceSearch'],
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          viewMode: "3D",
          zoom: 15,
          center: [115.49, 38.81],
        });

        map.on('complete', function () {
          var autoOptions = {

            input: "input_id"

          };
          var auto = new AMap.AutoComplete(autoOptions);
          const marker = new AMap.Marker({
            position: new AMap.LngLat(115.4887, 38.81489),
            offset: new AMap.Pixel(-10, -10),
            icon: "//vdata.amap.com/icons/b18/1/2.png", //添加 icon 图标 URL
            title: "当前",

          });
          map.add(marker);


          var placeSearch = new AMap.PlaceSearch({
            map: map,
          });

          auto.on("select", function (e) {

            console.log(e);

            placeSearch.setCity(e.poi.adcode);

            placeSearch.search(e.poi.name);  //关键字查询查询

          });
          // 搜索附近的旅游景区
          placeSearch.searchNearBy('旅游景区', [115.49, 38.81], 5000, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              // 处理搜索结果
              result.poiList.pois.forEach((poi) => {
                const marker = new AMap.Marker({
                  position: poi.location,
                  title: poi.name,
                });

                // 添加点击事件监听器
                marker.on('click', function () {
                  const distance = AMap.GeometryUtil.distance(
                    poi.location,
                    [115.49, 38.81]
                  );
                  console.log(`点击了标注：${poi.name}，距离指定位置：${distance.toFixed(2)}米`, poi);
                  // navigate('/chargeInfo', { state: { address: poi.address } })
                });

                map.add(marker);
              });
            }
          });

        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);



  return (
    <>
      {/* <div ref={mapRef} style={{ width: '100%', height: '100vh' }}></div> */}
      <div style={{textAlign:"center"}}>
        <button style={{
        width:"9rem",
        height:"5rem",
        borderTopLeftRadius:"2rem",
        borderBottomLeftRadius:"2rem",
        border:"0",backgroundColor:"#0f9af1"
        ,position:"absolute",
        top:"5rem",
        zIndex:"999",
        color:"white",
        left:"5rem"
        }}>北京</button>
          <input
            type="text"
            id="input_id" // 替换为实际输入框的 id
            placeholder="输入城市名称"
            style={{width:"25rem",height:"5rem",position:"absolute",top:"4.7rem",zIndex:"999",left:"14rem"}}
          />

        </div>
      <div
        id="container"
        className='container'
        style={{ height: "100rem", position: "relative" }}
      >
        
      </div>
    </>
  )
}

export default Map
